<template>
	<view class="index">
		<view class="max_box">
			<view class="header_back w100">
				<swiper class="w100 swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in lunbo.data" :key="index">
						<view class="w100 swiper-item uni-bg-red">
							<image class="w100 swiper_image" mode="aspectFill"
								:src="$wanlshop.oss(item.image, 414, 0, 1, 'transparent', 'png')"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="header_con flex">
				<navBar :title="title" :family="family" :positionText="positionText == '' ? address : positionText"
					:showLocation="true" :showBtn="false"></navBar>
			</view>
			<view class="header_two flex">
				<view class="left_sou">
					<image class="w100 h100" src="/static/index/sousuo.png" mode=""></image>
				</view>
				<input class="uni-input f500 family s24" placeholder-class="uni_my" placeholder="搜索商品、类目" />
				<!-- <view class="right_sao" @click="saoMa">
					<image class="w100 h100" src="/static/index/saoma.png" mode=""></image>
				</view> -->
				<!-- <view class="xiaoxi" @click="goMessage">
					<image class="w100 h100" src="/static/index/xiaoxi.png" mode=""></image>
					<uni-badge size="small" :text="5" style="position: absolute; top: -20upx;" absolute="rightTop"
						type="error"></uni-badge>
				</view>
				<view class="juan">
					<image class="w100 h100" src="/static/index/juan.png" mode=""></image>
					<uni-badge size="small" :text="text" style="position: absolute; top: -20upx;" absolute="rightTop"
						type="error"></uni-badge>
				</view> -->
			</view>

			<view class="header_bot">
				<view class="flex flexjus">
					<view class="title f500 family">
						室外烂漫主题婚纱摄影{{selectionCitys}}
					</view>
					<view class="xingxing flex">
						<view class="xin_img_box" v-for="(item,index) in 3" :key="index">
							<image class="w100 h100" src="/static/index/active_xin.png" mode=""></image>
						</view>
						<view class="xin_img_box" v-for="(item,index) in 1" :key="index">
							<image class="w100 h100" src="/static/index/xin.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex flexjus" style="margin-top: 22upx;">
					<view class="date f500 family">
						3小时拍摄
					</view>
					<view class="date f500 family">
						套餐价￥8600起
					</view>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="one_title fblod family">
				爆款套系
			</view>
			<view class="scroll w100">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in 3" :key="index">
						<image class="w100 h100" style="background: #efefef;" src="" mode=""></image>
						<view class="scroll_txt s24">
							总监定制-内外景任选总监定制-内外景任选
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content_box_two">
			<view class="one_title fblod family">
				热门推荐
			</view>
			<view class="scroll_two w100">
				<scroll-view class="scroll-view_H_two" scroll-x="true">
					<view class="scroll-view-item_H_two uni-bg-red" v-for="(item,index) in 3" :key="index">
						<image class="w100 h100" style="background: #efefef;" src="" mode=""></image>
						<view class="top_one fblod">
							TOP{{index+1}}
						</view>
						<view class="scr_txt_two fblod">
							最美伴娘团
						</view>
						<view class="scr_txt_three fblod">
							临洮婚纱摄影店推荐婚纱
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '../../App.vue'
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				title: '',
				family: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
				positionText: '',
				text: '减',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				lunbo: {},
				indexDiy: {}
			}
		},
		computed: {
			address() {
				return this.$store.state.getLocation.address
			},
			selectionCitys() {
				return uni.getStorageSync('selectionCity')
			},
			...mapState(['icon'])
		},
		onLoad() {
			this.getIndexDiy()
		},
		methods: {
			getIndexDiy() {
				let that = this
				that.$request({
					url: 'common/getInit'
				}).then(res => {
					if (res.data.code == 1) {
						this.lunbo = res.data.data.homeModules.item[0]
						this.indexDiy = res.data.data
					}
				})
			},
			getCitys(citys) {
				this.positionText = citys
			},
			goMessage() {
				uni.navigateTo({
					url: './messageCenter'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		width: 100%;
		padding-bottom: 50upx;

		.max_box {
			height: 928upx;
			.header_back {
				height: 928upx;
				position: absolute;
				top: 0;
				filter: blur(2upx);

				.swiper {
					height: 928upx;

					.swiper-item {
						height: 928upx;

						.swiper_image {
							height: 928upx;
						}
					}
				}
			}

			.header_two {
				margin-left: 26upx;
				margin-top: 10upx;
				position: fixed;
				z-index: 99;
				.left_sou {
					width: 29upx;
					height: 29upx;
					position: absolute;
					left: 18rpx;
					top: 12rpx;
				}
				.uni-input {
					width: 550rpx;
					height: 64upx;
					background: rgba(255, 255, 255, 0.4);
					border-radius: 32upx 32upx 32upx 32upx;
					padding: 0 66upx 0 59upx;
					color: #FFFFFF;
				}

				.right_sao {
					width: 30upx;
					height: 30upx;
					position: relative;
					top: 14rpx;
					right: 62rpx;
				}

				.xiaoxi {
					width: 37upx;
					height: 44upx;
					margin-left: 10upx;
					margin-top: 10upx;
				}

				.juan {
					width: 70upx;
					height: 68upx;
					margin-left: 30upx;
					margin-top: -5upx;
				}

				/deep/.uni_my {
					color: #FFFFFF;
				}
			}

			.header_bot {
				height: 134upx;
				background: rgba(255, 255, 255, 0.6);
				position: relative;
				z-index: 99;
				margin-top: 590rpx;
				padding: 34upx 32upx 0 32upx;

				.title {
					font-size: 36upx;
					color: #000000;
				}

				.xingxing {
					margin-right: 8upx;

					.xin_img_box {
						width: 28upx;
						height: 26upx;
						margin-left: 10upx;
					}
				}
			}

			.date {
				font-size: 26upx;
				color: rgba(51, 51, 51, 0.7);
			}

		}

		.content_box {
			margin-top: 86upx;
			margin-left: 32upx;

			.one_title {
				width: 128upx;
				font-size: 32upx;
				color: #000000;
			}

			.scroll {
				margin-top: 36upx;

				.scroll-view_H {
					width: 100%;
					white-space: nowrap;

					.scroll-view-item_H {
						width: 316upx;
						height: 232upx;
						display: inline-block;
						border-radius: 16upx 16upx 16upx 16upx;
						margin-left: 16upx;
						background: #EFEFEF;
						overflow: hidden;

						.scroll_txt {
							width: 244upx;
							height: 34upx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							margin-top: -60upx;
							margin-left: 20upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.scroll-view-item_H:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}

		.content_box_two {
			margin-top: 66upx;
			margin-left: 32upx;

			.one_title {
				width: 128upx;
				font-size: 32upx;
				color: #000000;
			}

			.scroll_two {
				margin-top: 36upx;

				.scroll-view_H_two {
					width: 100%;
					white-space: nowrap;

					.scroll-view-item_H_two {
						width: 446upx;
						height: 234upx;
						display: inline-block;
						border-radius: 16upx 16upx 16upx 16upx;
						margin-left: 20upx;
						overflow: hidden;

						.top_one {
							width: 148upx;
							height: 58upx;
							background: rgba(255, 255, 255, 0.6);
							border-radius: 29upx 0upx 0upx 29upx;
							font-size: 28upx;
							font-family: PingFang SC-Bold, PingFang SC;
							color: #000000;
							text-align: center;
							line-height: 58upx;
							position: relative;
							z-index: 99;
							top: -170upx;
							left: 298upx;
						}

						.scr_txt_two {
							font-size: 28upx;
							font-family: PingFang SC-Bold, PingFang SC;
							color: #FFFFFF;
							position: relative;
							top: -152upx;
							left: 20upx;
						}

						.scr_txt_three {
							width: 242upx;
							height: 30upx;
							font-size: 22upx;
							font-family: PingFang SC-Bold, PingFang SC;
							color: rgba(255, 255, 255, 0.8);
							position: relative;
							top: -148upx;
							left: 20upx;
						}
					}

					.scroll-view-item_H_two:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
	}
</style>
